<template>
  <view class="login" >
    <view class="login-card" >
      <image class="ava" mode="aspectFill" :src="logoBig" alt="" />

      <view class="desc" >
        <view class="title" >干支日记</view>
        <view class="tips" >登录后可写日记，参与互动</view>
      </view>

      <!-- open-type="chooseAvatar"
      @chooseavatar="chooseavatarCallback" -->
      
      <view 
        class="login-btn"
        @click="_login"
      >
        <image class="wx-logo" mode="aspectFill" src="/static/common/wechat.png" />
        <view>微信一键登录</view>
      </view>
    </view>
   

  </view>
</template>
<script lang='ts'  setup >
import { tabbarPath } from '@/service'
import logoBig from '@/static/common/ava-my.png'
import { useUserStore } from '@/store'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const { login } = useUserStore()

const path = ref('')

const originPath = ref('')

const chooseavatarCallback = (record: any) => {
  console.log(record);
}

onLoad((options: any) => {
  if (options.query) {
    let queryStr = ''
    const query = JSON.parse(options.query)
    console.log('query:', query);
    queryStr = Object.keys(query).map(key => `${key}=${query[key]}`).join('&')
    originPath.value = options.path
    path.value = options.path + '?' +  queryStr 
    console.log('path.value:', path.value);
  }
})

const _login = () => {
  console.log('_login');
  
  login().then(() => {
    if (path.value) {
      if (tabbarPath.includes( originPath.value)) {
        uni.switchTab({
          url: '/' + path.value
        })
      } else {
        uni.redirectTo({
          url: '/' + path.value
        })
      }
      
    } else {
      uni.navigateBack()
    }
  })
}

</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

 .login {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 128rpx;
  box-sizing: border-box;
  .login-card {
    width: 100vw;
    height: 100vh;
    border-radius: 48rpx;
    background-color: $page-color;
    .ava {
      width: 186rpx;
      height: 186rpx;
      border-radius: 50%;
      display: block;
      margin: 0 auto;
      margin-top: -93rpx;
    }
    .desc {
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-top: 148rpx;
      .title {
        font-size: 42rpx;
        color: $text-color;
      }
      .tips {
        margin-top: 28rpx;
        font-size: 26rpx;
        color: #a5a4a4;
      }
    }
  }
  
  // .logo {
  //   width: 195rpx;
  //   height: 173rpx;
  //   margin-bottom: 48rpx;
  // }
  // .label {
  //   font-size: 40rpx;
  //   font-family: PingFangSC-Medium, PingFang SC;
  //   font-weight: 500;
  //   color: #333333;
  // }
  .login-btn {
    width: 480rpx;
    height: 120rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 68rpx;
    background: #5dc97e;
    padding: 0;
    margin: 0 auto;
    margin-top: 440rpx;
    position: static;
    border: 0 !important;
    .wx-logo {
      width: 76rpx;
      height: 66rpx;
      display: block;
      margin-right: 24rpx;
    }
  }
 }
</style>